<template>
  <div class="site">
    <title-panel title="站点信息" class="panel small-panel">
      <template v-slot:content>
        <SiteInfo/>
      </template>
    </title-panel>
    <title-panel title="近期监测地震事件" class="panel  big-panel">
      <template v-slot:content>
        <EarthquakeEvent/>
      </template>
    </title-panel>
    <title-panel title="中国地震台网" class="panel big-panel">
      <template v-slot:content>
        <EarthquakeInfo/>
      </template>
    </title-panel>
    <title-panel title="统计信息" class="panel small-panel">
      <template v-slot:content>
        <SiteStatistics/>
      </template>
    </title-panel>
    <title-panel title="特征数据" class="panel big-panel">
      <template v-slot:content>
        <Features/>
      </template>
    </title-panel>
    <title-panel title="实时数据" class="panel big-panel">
      <template v-slot:content>
        <RealtimeDatas :chart-id="'tableChartId'"/>
      </template>
    </title-panel>
    
    <!--    <div class="left">-->
    <!--      <title-panel title="站点信息" style="height:48%">-->
    <!--        <template v-slot:content>-->
    <!--          <SiteInfo/>-->
    <!--        </template>-->
    <!--      </title-panel>-->

    <!--      <title-panel title="统计信息" style="height:48%;margin-top:4%;">-->
    <!--        <template v-slot:content>-->
    <!--          <SiteStatistics/>-->
    <!--        </template>-->
    <!--      </title-panel>-->
    <!--    </div>-->
    <!--    <div class="right">-->
    <!--      <title-panel title="近期监测地震事件" style="height:48%;width:47%;">-->
    <!--        <template v-slot:content>-->
    <!--          <EarthquakeEvent/>-->
    <!--        </template>-->
    <!--      </title-panel>-->
    <!--      <title-panel title="中国地震台网" style="height:48%;width:47%;">-->
    <!--        <template v-slot:content>-->
    <!--          <EarthquakeInfo/>-->
    <!--        </template>-->
    <!--      </title-panel>-->
    <!--      <title-panel title="特征数据" style="height:48%;width:47%;margin-top:1%;">-->
    <!--        <template v-slot:content>-->
    <!--          <Features/>-->
    <!--        </template>-->
    <!--      </title-panel>-->
    <!--      <title-panel title="实时数据" style="height:48%;width:47%;margin-top:1%;">-->
    <!--        <template v-slot:content>-->
    <!--          <RealtimeDatas/>-->
    <!--        </template>-->
    <!--      </title-panel>-->
    <!--    </div>-->

  </div>
</template>

<script lang="ts" setup>
  import SiteInfo from '@/views/comps/SiteInfo.vue'
  import EarthquakeEvent from '@/views/comps/EarthquakeEvent.vue'
  import EarthquakeInfo from '@/views/comps/EarthquakeInfo.vue'
  import SiteStatistics from '@/views/comps/SiteStatistics.vue'
  import RealtimeDatas from '@/views/comps/RealtimeDatas.vue'
  import Features from '@/views/comps/Features.vue'
  import {ref} from 'vue'
  import TitlePanel from "@/views/comps/TitlePanel.vue";
  let dialogVisible =ref(true)
</script>

<style lang="scss">
  @import "@/assets/styles/theme";

  .el-popper.is-light .el-popper__arrow::before {
    background: rgba(0, 63, 63, .8);
  }

  .el-popper.is-light {
    background: $select-background !important;
    border: 1px solid $table-border-color !important;
  }

  .el-select-dropdown__item.selected {
    color: $select-color-selected;
  }

  .el-select-dropdown__item {
    color: $select-color;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: $select-background-selected !important;
  }

  .site {
    .el-form--inline {
      .el-form-item {
        margin-right: 15px;
      }
    }

    .el-input {
      height: 25px;
    }
  }

</style>

<style lang="scss" scoped>
  @import "@/assets/styles/theme";

  .site {
    position: absolute;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    text-align: left;
    display: flex;
    flex-direction: row;
    padding: 10px;
    box-sizing: border-box;
    background-color: rgba(1, 43, 43, 0.9);

    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .panel {
      min-height: 400px;
      margin-bottom: 20px;
      box-sizing: border-box;
    }

    .big-panel {
      /*min-width: 450px;*/
      height: 48%;
      width: 35%;
    }

    .small-panel {
      /*min-width: 450px;*/
      height: 48%;
      width: 25%;
    }


    :deep(.el-pagination) {
      --el-pagination-bg-color: $page-background;
      --el-pagination-hover-color: rgb(27, 241, 241);
      --el-pagination-button-disabled-color: rgb(1, 87, 87);
      --el-pagination-button-bg-color: rgb(3, 189, 189);
      --el-disabled-bg-color: rgb(2, 114, 114);
      --el-color-white: rgb(1, 62, 62);
      --el-text-color-regular: rgb(1, 106, 106);
      --el-color-primary: rgb(4, 229, 229);
    }

    :deep(.el-form-item__label) {
      color: $table-color;
    }

    :deep(.el-input__inner) {
      color: $table-color;
    }

    :deep(.el-input) {
      --el-input-bg-color: $table-background;
      --el-input-text-color: $table-color;
      --el-input-focus-border-color: #3aecff;
      --el-input-border-color: #11cce0;
      --el-input-focus-border: #3aecff;
    }

    .left {
      width: 25%;
      display: flex;
      flex-direction: column;
    }

    .right {
      width: 75%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .menu {
      background: white;
      border: 1px solid #d9d9d9;
      height: 40px;
      line-height: 40px;
      width: 40px;
      border-radius: 5px;
      color: #0F2F55;
      margin-top: 10px;
      text-align: center;
    }


    @media screen and (max-width: 1900px) {
      .big-panel{
        width: 35%;
      }
      .small-panel{
        width: 25%;
      }
    }

    @media screen and (max-width: 1710px) {
      .big-panel{
        width: 35%;
      }
      .small-panel{
        width: 25%;
      }
    }
    @media screen and (max-width: 1700px) {
      .big-panel{
        width: 48%;
      }
      .small-panel{
        width: 48%;
      }
    }
    @media screen and (max-width: 1100px) {
      .panel{
        width: 100%;
      }
    }
    @media screen and (max-width: 1000px) {
      .panel{
        width: 100%;
      }
    }
  }
</style>
